import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView, StatusBar, TextInput, Modal, RefreshControl, FlatList,
    Keyboard, Alert, Linking
} from 'react-native';
import { WebView } from 'react-native-webview'
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
import Styles from './Styles';

import Ugame from '../../../../Ugame';
import Httpc from "../../../utils/Httpc";
import REQUEST from "../../../../REQUEST";
var BETTYPE = {
    One: 0,
    Multiple: 1,
    Bladder: 2
}
export default class DLTOrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            deatiled: null,
            betImages: [],
            betContent: []
        };
        this.id = null;
        this.type_title = {
            1: ['主胜', '平', '主负'],
            2: ['让胜', '让平', '让负'],
            3: ["1:0", "2:0", "2:1", "3:0", "3:1", "3:2", "4:0", "4:1", "4:2", "5:0", "5:1", "5:2", "胜其他", "0:0", "1:1", "2:2", "3:3", "平其他", "0:1", "0:2", "0:3", "0:4", "0:5", "1:2", "1:3", "1:4", "1:5", "2:3", "2:4", "2:5", "负其他"],
            4: ['0', '1', '2', '3', '4', '5', '6', '7+'],
            5: ['胜-胜', '胜-平', '胜-负', '平-胜', '平-平', '平-负', '负-胜', '负-平', '负-负'],
        }
    }
    static navigationOptions = {
        title: '彩票详情',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }

    componentDidMount() {
        const { navigation } = this.props;
        var id = navigation.getParam("id");
        var params = {
            token: Ugame.info.Token,
            id: id
        }
        Httpc.get(REQUEST.GetUserGameOrderDetail, params, (res) => {
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
                this.props.navigation.navigate('Login');
                return;
            }

            if (res.StatusCode == 1) {
                let result = res.Data;
                let betContent = [];
                this.setState({
                    deatiled: result,
                    betContent: result.Data
                });
                let betImages = [];
                let images = result.Images;
                if (!!images) {
                    for (let i = 0; i < images.length; i++) {
                        Image.getSize(images[i], (w, h) => {
                            let imgW = width - 24;
                            let imgH = ((width - 24) / w) * h;
                            betImages.push({
                                imgW: imgW,
                                imgH: imgH,
                                image: images[i]
                            });
                            this.setState({
                                betImages: betImages
                            });
                        })
                    }
                }
            }
        });

    }
    renderLoadingView() {
        return (
            <View style={Styles.container}></View>
        );
    }
    renderRedBll = ({ item }) => {
        return (
            <Text style={{ fontSize: 10, color: '#333333', marginLeft: 2, marginRight: 2 }}>45</Text>
        );

    }
    renderBlueBll = ({ item }) => {
        return (
            <Text style={{ fontSize: 10, color: '#333333', marginLeft: 2, marginRight: 2 }}>45</Text>
        );

    }
    renderBetitem = ({ item }) => {
        let open_red_ball = [], open_blue_ball = [];
        try{
            if (item.Result != '') {
                let result = item.Result.result.split('|');
                open_red_ball = result[0].split(',');
                open_blue_ball = result[1].split(',');
            }
        }catch(e){
            return;
        }        
        let tips = '';
        switch (item.TypeId) {
            case BETTYPE.One:
                tips = '单式';
                break;
            case BETTYPE.Multiple:
                tips = '复式';
                break;
            case BETTYPE.Bladder:
                tips = '胆拖';
                break;
        }
        let red_bladder = [], red_ball = [], blue_bladder = [], blue_ball = [];
        let balls = item.BetNo.split("|");
        let red = balls[0].split('#');
        if (balls[0].indexOf('#') != -1) {
            red_bladder = red[0].split(',');
            red_bladder.push('#');
            red_ball = red[1].split(",");
        } else {
            red_ball = red[0].split(",");
        }
        let blue = balls[1].split('#');
        if (balls[1].indexOf('#') != -1) {
            blue_bladder = blue[0].split(',');
            blue_bladder.push('#');
            blue_ball = blue[1].split(',');
        } else {
            blue_ball = blue[0].split(',');
        }
        red_ball = red_bladder.concat(red_ball);
        blue_ball = blue_bladder.concat(blue_ball);

        let red_ball_node = [];
        for (let i = 0; i < red_ball.length; i++) {
            let css = Styles.red_ball_t;
            if (open_red_ball.indexOf(red_ball[i]) != -1) {
                css = Styles.red_ball_t_on;
            }
            if (red_ball[i] == '#') {
                css = { height: 25, lineHeight: 25, textAlign: 'center', color: '#d0162e', marginRight: 3 }
            }
            red_ball_node.push(
                <Text key={i} style={[css,{marginBottom:5}]}>{red_ball[i]}</Text>
            );
        }
        let blue_ball_node = [];
        for (let i = 0; i < blue_ball.length; i++) {
            let css = Styles.blue_ball_t;
            if (open_blue_ball.indexOf(blue_ball[i]) != -1) {
                css = Styles.blue_ball_t_on;
            }
            if (blue_ball[i] == '#') {
                css = { height: 25, lineHeight: 25, textAlign: 'center', color: '#1094d8', marginRight: 3 }
            }
            blue_ball_node.push(
                <Text key={i} style={[css,{marginBottom:5}]}>{blue_ball[i]}</Text>
            );
        }

        return (
            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginTop: 20 }}>
                <Text style={{ marginRight: 5, color: '#666666' }}>{tips}</Text>
                <View style={{ width:width - 50, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center',flexWrap:'wrap',paddingLeft:5,paddingRight:5 }}>
                    {red_ball_node}
                    {blue_ball_node}
                </View>
            </View>
        );

    }
    _renderImage = (item) => {

    }
    renderImageitem = ({ item }) => {
        if (!!item) {
            return (
                <Image resizeMode="cover" style={{ width: item.imgW, height: item.imgH, marginLeft: 12 }} source={{ uri: item.image }} />
            );
        }

    }
    do_tel = () => {
        let tel = 'tel:' + Ugame.site.phone// 目标电话
        Linking.canOpenURL(tel).then((supported) => {
            if (!supported) {
                console.log('Can not handle tel:' + tel)
            } else {
                return Linking.openURL(tel)
            }
        }).catch(error => console.log('tel error', error))

    }
    do_football = () => {
        this.props.navigation.navigate('DLTGame');
    }
    on_open_balls = (balls) => {
        if (balls == '') {
            return;
        }
        balls = balls.split('|');
        let red_ball = balls[0].split(',');
        let blue_ball = balls[1].split(',');
        let ball_node = [];
        for (let i = 0; i < red_ball.length; i++) {
            let css = Styles.red_ball_t_on;
            ball_node.push(
                <Text key={ball_node.length} style={css}>{red_ball[i]}</Text>
            );
        }
        for (let i = 0; i < blue_ball.length; i++) {
            let css = Styles.blue_ball_t_on;
            ball_node.push(
                <Text key={ball_node.length} style={css}>{blue_ball[i]}</Text>
            );
        }
        return ball_node;
    }
    render() {
        let { deatiled, betImages, betContent } = this.state;
        if (deatiled == null) {
            return this.renderLoadingView();
        }
        //0,未接单，1已接单，未打票 2已打票（通过IsTake 代表已经取票），3已撤单，4未中奖 5已中奖 6已拍奖
        return (
            <View style={[Styles.container, { backgroundColor: '#f7f7f7' }]}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView style={{ width: width, height: height - 200 }}>
                    <View style={{ height: 90, marginBottom: 10, backgroundColor: '#ffffff' }}>
                        <Text style={{ color: '#333333', paddingLeft: 12, width: width, height: 40, lineHeight: 40, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>{deatiled.Title}</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', height: 50 }}>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                {(deatiled.State == 5 || deatiled.State == 6) ?
                                    <Text style={{ fontSize: 12, color: "#333" }}>
                                        {deatiled.Coin}
                                    </Text> : <Text style={{ fontSize: 12, color: "#333" }}>--</Text>}
                                <Text style={{ fontSize: 10, color: '#969696' }}>中奖金额(元)</Text>
                            </View>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 12, color: "#333" }}>
                                    {deatiled.State == 0 ? '未接单' : null}
                                    {deatiled.State == 1 ? '出票中' : null}
                                    {deatiled.State == 2 ? '开奖中' : null}
                                    {deatiled.State == 3 ? '已撤单' : null}
                                    {deatiled.State == 4 ? '未中奖' : null}
                                    {deatiled.State == 5 ? '已中奖' : null}
                                    {deatiled.State == 6 ? '已派奖' : null}

                                </Text>
                                <Text style={{ fontSize: 10, color: '#969696' }}>订单状态</Text>
                            </View>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 12, color: "#333" }}>{deatiled.Coin}</Text>
                                <Text style={{ fontSize: 10, color: '#969696' }}>投注金额(元)</Text>
                            </View>
                        </View>
                    </View>
                    <View style={{ paddingLeft: 12, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', height: 60, backgroundColor: '#ffffff', marginBottom: 10 }}>
                        {betContent[0].Result == '' ?
                            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                <Text style={{ color: '#666666', marginRight: 10 }}>预计开奖</Text>
                                <Text>{betContent[0].Opentime.substr(0, 16)}</Text>
                            </View> :
                            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                <Text style={{ color: '#666666', marginRight: 10 }}>开奖号码</Text>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
                                    {this.on_open_balls(betContent[0].Result)}
                                </View>
                            </View>
                        }
                    </View>
                    <View style={{ backgroundColor: '#ffffff', padding: 12 }}>
                        <View style={{ height: 40, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottomColor: '#efefef', borderBottomWidth: 0.5 }}>
                            <Text>投注信息</Text><Text style={{ fontSize: 12, color: "#969696" }}> {deatiled.Name}  {deatiled.SBetRec}注 {deatiled.Mult}倍</Text>
                        </View>
                        <FlatList
                            data={betContent}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={this.renderBetitem}
                        />
                    </View>
                    <View style={{ width: width, marginTop: 10, backgroundColor: '#ffffff', paddingLeft: 12, paddingRight: 12, paddingBottom: 10 }}>
                        <Text style={{ borderBottomColor: '#f7f7f7', borderBottomWidth: 0.5, height: 40, color: '#969696', lineHeight: 40 }}>订单详情</Text>
                        <Text style={{ color: '#969696', height: 20, lineHeight: 20, fontSize: 12 }}>订单编号：{deatiled.OrderID}</Text>
                        <Text style={{ color: '#969696', height: 20, lineHeight: 20, fontSize: 12 }}>下单时间：{deatiled.Otime.substr(0, 19)}</Text>
                        <Text style={{ color: '#969696', height: 20, lineHeight: 20, fontSize: 12 }}>出票时间：{deatiled.Ttime.substr(0, 19)}</Text>
                    </View>
                    <FlatList
                        data={betImages}
                        keyExtractor={(item, index) => index.toString()}
                        renderItem={this.renderImageitem}
                    />
                </ScrollView>
                <View style={{ width: width, height: 40, backgroundColor: '#FFFFFF', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                    <TouchableOpacity onPress={() => this.do_tel()}>
                        <View style={{ width: width / 2, height: 40, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#666666' }}>联系店主</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.do_football()}>
                        <View style={{ width: width / 2, height: 40, backgroundColor: '#d0162e', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#ffffff' }}>重新投注</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
